define(['vue'],function(vue){
  return vue.component('comp-text',{
    props:['fld','value','readonly','disabled'],
    template: `<el-input
    v-bind="fld"
    :value='value'
    @input="handleModelInput"
    @change="handleChange"
    :ref="fld.name"
    >
    <template slot="prepend" v-if="fld.prepend||fld.addonPre">
      <span v-html="fld.prepend||fld.addonPre"></span>
    </template>
    <template slot="append" v-if="fld.append||fld.addonEnd">
      <span v-html="fld.append||fld.addonEnd"></span>
    </template>
  </el-input>`,
    methods:{
      handleModelInput :function(val){
        this.$emit("input", val);
      },
      handleChange :function(val){
        // dump(this.fld);
        var key = this.fld.change || `${this.fld.name}:change`;
        if(!this.$root.callbacks[key]) return;
        this.$root.callbacks[key].apply(this,arguments);
      },
    },
    mounted:function(){
      // dump('comp-text mounted fired');
    }
  });  
});